<template>
  <div>

    <el-dialog :visible.sync="flag" width="40%" top="10vh">

      <el-form ref="loginForm" :rules="rules" label-width="80px" class="login-box">
        <h3 class="login-title">修改业主信息</h3>

        <el-form-item label="业主id">
          <el-input type="text" v-model="owner.ownerId"/>
        </el-form-item>

        <el-form-item label="姓名">
          <el-input type="text" v-model="owner.ownerName"/>
        </el-form-item>

        <el-form-item label="性别">
          <el-input type="text" v-model="owner.ownerSex"/>
        </el-form-item>

        <el-form-item label="年龄">
          <el-input type="text" v-model="owner.ownerAge"/>
        </el-form-item>

        <el-form-item label="地址">
          <el-input type="text" v-model="owner.ownerAddress"/>
        </el-form-item>

      </el-form>

      <div style="margin: 0 auto;margin-bottom: 20px">
        <el-button type="success" @click="onSubmit">确定修改</el-button>
      </div>

    </el-dialog>

    <el-row style="margin-top: 100px;background-color: #fcfcbc;padding: 20px 0 20px 0">
      <el-col :span="10">
        <!-- 业主头像-->
        <div>
          <img src="@/assets/OIP-C.jpg" alt=""style="width: 50%;height: 234px;border: 5px solid #fcda70"/>
        </div>
      </el-col>

      <el-col :span="12">

        <el-descriptions class="margin-top" :size="size" :column="2" title="业主信息" border>

          <template slot="extra">
            <div>
              <el-button @click="updateList" type="warning">编辑</el-button>
            </div>
          </template>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user-solid"></i>
              业主ID
            </template>
            {{owner.ownerId}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              姓名
            </template>
            {{owner.ownerName}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              性别
            </template>
            {{owner.ownerSex}}
          </el-descriptions-item>


          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              年龄
            </template>
            {{owner.ownerAge}}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              地址
            </template>
            <el-tag size="small">{{owner.ownerAddress}}</el-tag>
          </el-descriptions-item>
        </el-descriptions>


      </el-col>
    </el-row>

  </div>



</template>

<script>
export default {
  name: "ownerInfo",
  data () {
    return {
      flag: false,
      size: '',
      owner: [
        {
          ownerId: '',
          ownerName: '',
          ownerSex: '',
          ownerAge: '',
          ownerAddress: '',
          image:'',
          carLicenseId:'',
          carParkingId:''
        }
      ],
      //表单验证，需要在 el-form-item 元素中增加prop属性
      rules: {

      },
    }
  },
  methods:{
    updateList() {

      this.flag = true
    },
    onSubmit(){

      this.$axios({
        url: '/owner/updateOwner',
        method: "post",
        data: this.owner
      }).then(()=>{
        this.flag = false;
      })
    }
  },
  mounted() {
    console.log("++++++++++++++++");
    var ownerId =  this.$route.params.ownerId; // 取
    console.log(ownerId);
    console.log("########");
    this.$axios({
      url: '/owner/ownerById',
      params:{ownerId:ownerId}
    }).then(res=>
    {
      console.log(res);
      this.owner = res.data;
    })
  }
}
</script>

<style scoped>

.login-box{
  width: 400px;
  margin: 0 auto;
}

</style>

